<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_Intent.jpg"
            class="w-6 h-6 rounded"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          用于用户输入的意图识别，并将其与预设意图选项进行匹配。
        </div>
      </div>
    </template>
    <TypeTab
      v-model="form.modetype"
      :data="DEFAULT_INTENT_TABS"
      active-color="#4d53e8"
      bg-color="#efefef"
    />
    <CommonCollapse title="模型" v-show="form.modetype == 'intact'">
      <div class="flex items-center">
        <Select v-model="form.selectmodel">
          <Option v-for="item in modelList" :key="item.id" :value="item.id">{{ item.name }}</Option>
        </Select>
        <Icon class="ml-2" type="md-settings" size="20" />
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse title="输入" tip="输入需要做意图识别判断的参数">
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 110px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form.intentionvo" label-position="top">
            <div class="flex items-center mb-4">
              <div
                class="inline-flex items-center panel-table-item"
                style="width: 160px"
              >
                {{form.intentionvo.varname}}
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="form.intentionvo.vartype">
                    <Option
                      v-for="item in BE_TYPE_LIST"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  prop="varparam"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="form.intentionvo.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div
                class="panel-table-item btn"
                @click="removeInput('inputList', index)"
              >
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse title="意图匹配" tip="用于与用户输入匹配的意图选项">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput()"
        ></Button>
      </template>
      <div class="panel-table">
        <Form ref="formEl" :model="form" label-position="top">
          <div class="panel-table-list">
            <draggable v-model="form.intentionlist" animation="250">
              <template #item="{ element, index }">
                <div class="flex items-center mb-4">
                  <Icon
                    type="md-reorder"
                    color="#999"
                    size="18"
                    class="cursor-grab"
                  />
                  <Input
                    size="small"
                    v-model="element.name"
                    type="textarea"
                    :autosize="true"
                    placeholder="请输入用户意图的描述，如售后问题等"
                  >
                  </Input>
                  <div class="panel-table-item btn" @click="removeInput(index)">
                    <Icon type="ios-remove-circle-outline" />
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </Form>

        <p class="text-xs text-black">其他意图</p>
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse
      v-show="form.modetype == 'intact'"
      title="系统提示词"
      tip="输入内容将会被追加到系统提示词中"
    >
      <Input
        v-model="form.systempromptword"
        type="textarea"
        :rows="4"
        placeholder="支持额外的系统提示词，如对意图选项提供更详细的例子以增强用户输入与意图匹配的成功率。"
      />
    </CommonCollapse>
    <Divider v-show="form.modetype == 'intact'"></Divider>
    <CommonCollapse title="输出" tip="输出">
      <div class="panel-table">
        <div class="flex items-center">
          <span class="text-sm">classificationId</span>
          <div class="text-bg-normal">Integer</div>
        </div>
        <div class="flex items-center">
          <span class="text-sm">reason</span>
          <div class="text-bg-normal">String</div>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse
      title="异常处理"
      tip="可设置异常处理，包括超时、重试、异常处理方式。"
    >
      <CommonAbnormalModule :form="form.excepjsondata" />
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
import { flowStore } from '@/store/flow';
import CommonCollapse from '@/components/CommonCollapse/index.vue';
import CommonAbnormalModule from './common-abnormal-module.vue';
import {
  BE_TYPE_LIST,
} from '../../lib/constant';

const DEFAULT_INTENT_TABS = [
  {
    label: '极速模式',
    value: 'topspeed',
  },
  {
    label: '完整模式',
    value: 'intact',
  },
];

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '意图识别',
  },
});

const emit = defineEmits(['add', 'remove', 'cancel']);
const { modelList } = flowStore();

const visible = ref(false);

// 组件的增删
const addInput = () => {
  emit('add');
};
const removeInput = (index) => {
  if (index == 0) return;
  emit('remove', index);
};
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}
</style>
